import axios from 'axios';
import rainbow from '../spa/effect/Rainbow Pack/Rainbow_Pack.js'

let mobile = (function(){

    let articleComponent = {
        props:['width','height'],
        template:
        '<div :style=[articleStyle] @click="switchPage" >' +
        '<img id="articleLogo" :style=[imgStyle] :src="imgSrc" />' +
        '</div>',
        data:function () {
            return {
                imgSrc:'',
                articleStyle:{
                    position:'relative',
                    display:"inline-block",
                    float:'left',
                    borderWidth:2+'px',
                    borderStyle:'solid none none solid',
                    borderColor:'#000000',
                    width:this.$props.width+'px',
                    height:this.$props.height+'px'
                },
                imgStyle:{
                    marginLeft:this.getMarginLeft()+'%',
                    marginTop:this.getMarginTop()+'%',
                    width:0
                }
            }
        },
        methods:{
            switchPage:function () {
                let _this = this;
                let url = '/article';
                axios.post(url).then(function (res) {
                    location.href=res.data;
                })
            },
            requestImg:function () {
                let _this = this;
                let url = '/img/pen.png';
                axios.post(url).then(function (res) {
                    _this.imgSrc = res.data;
                    _this.$data.imgStyle.width = _this.getImgW()+'%';
                })
            },
            coefficient:function () {
                /*
                * 给图片宽高提供一个统一的系数
                * 因为图片是正方形的,所以宽高比例要一致
                * 使用系数能够简单的调节到自己想要的图片在屏幕所要占的比例
                * */
                return 0.1;
            },
            getMarginLeft:function () {
                /*
                * 返回100%-图片所占屏幕宽度百分比的一半
                * */
                return (100-this.getImgW())/2;
            },
            getMarginTop:function () {
                /*
                * 返回100%-图片所占屏幕高度百分比的一半
                * */
                return 48;
            },
            getImgW:function () {
                /*给imgStyle提供宽度*/
                let windowW = this.$props.width;
                return Math.floor(windowW*this.coefficient());
            },
            getImgH:function () {
                /*给imgStyle提供高度*/
                let windowH = this.$props.height;
                return Math.floor(windowH*this.coefficient());
            }
        },
        mounted:function () {
            this.requestImg();
        }
    };

    let sourceCodeComponent = {
        props:['width','height'],
        template:
        '<div :style=[sourceCodeStyle]  @click="switchPage" >' +
        '<img :style=[imgStyle] :src="imgSrc" />' +
        '</div>',
        data:function () {

            return{
                sourceCodeStyle:{
                    position:'relative',
                    display:"inline-block",
                    float:'left',
                    borderWidth:2+'px',
                    borderStyle:'solid solid none none',
                    borderColor:'#000000',
                    width:this.$props.width+'px',
                    height:this.$props.height+'px'
                },
                imgSrc:'',
                imgStyle:{
                    marginLeft:this.getMarginLeft()+'%',
                    marginTop:this.getMarginTop()+'%',
                    width:0,
                    zIndex:2
                }
            }
        },
        methods:{
            switchPage:function () {
                let _this = this;
                let url = '/source_code';
                axios.post(url).then(function (res) {
                    location.href = res.data;
                })
            },
            requestImg:function () {
                let _this = this;
                let url = '/img/code.png';
                axios.post(url).then(function (res) {
                    _this.imgSrc = res.data;
                    _this.$data.imgStyle.width = _this.getImgW()+'%';
                })
            },
            coefficient:function () {
                /*
                * 给图片宽高提供一个统一的系数
                * 因为图片是正方形的,所以宽高比例要一致
                * 使用系数能够简单的调节到自己想要的图片在屏幕所要占的比例
                * */
                return 0.1;
            },
            getMarginLeft:function () {
                /*
                * 返回100%-图片所占屏幕宽度百分比的一半
                * */
                return (100-this.getImgW())/2;
            },
            getMarginTop:function () {
                /*
                * 返回100%-图片所占屏幕高度百分比的一半
                * */
                return 48;
            },
            getImgW:function () {
                /*给imgStyle提供宽度*/
                let windowW = this.$props.width;
                return Math.floor(windowW*this.coefficient());
            },
            getImgH:function () {
                /*给imgStyle提供高度*/
                let windowH = this.$props.height;
                return Math.floor(windowH*this.coefficient());
            }
        },
        mounted:function () {
            this.requestImg();
        }
    };


    let topHeader = {
        props:['height'],
        template:
        '<div :style=[topHeaderStyle]>' +
        '<div>'+
        '<img id="logo" :style=[imgStyle] :src="imgSrc" />' +
        '</div>'+
        '<p :style=[textStyle]>咖啡猫技术客栈</p>' +
        '</div>',
        data:function () {

            return {
                topHeaderStyle:{
                    display:'block',
                    position:'relative',
                    height:this.$props.height+'px',
                },
                imgSrc:'',
                imgStyle:{
                    marginTop:60+'px',
                    marginLeft:this.getMarginLeft()+'%',
                    width:0
                },
                textStyle:{
                    textAlign: 'center',
                    marginTop:100+'px',
                    fontSize:80+'px',
                }
            }
        },
        methods:{
            request:function(){
                let url = '/img/mobileLogo.png';
                let _this = this;
                axios.post(url).then(function (res) {
                    _this.$data.imgSrc=res.data;
                    _this.imgSize();
                })
            },
            imgSize:function () {
                this.$data.imgStyle.width=this.getImgW()+'%';
            },
            coefficient:function () {
                /*
                * 给图片宽高提供一个统一的系数
                * 因为图片是正方形的,所以宽高比例要一致
                * 使用系数能够简单的调节到自己想要的图片在屏幕所要占的比例
                * */
                return 0.065;
            },
            getMarginLeft:function () {
                /*
                * 返回100%-图片所占屏幕百分比的一半
                * */
                return (100-this.getImgW())/2;
            },
            getImgW:function () {
                /*给imgStyle提供宽度*/
                let windowW = window.innerWidth;
                return Math.floor(windowW*this.coefficient());
            },
        },
        mounted:function () {
            this.request();
        }
    };

    let container = {
        template:
        '<div :style=[rootStyle]>'+
            '<svg :id="getSvgId()" :style=[svgStyle] >' +
                '<g></g>'+
            '</svg>'+
            '<top-header :height="props.height"></top-header>' +
            '<source-code-component :width="props.width" :height="props.height2"></source-code-component>' +
            '<article-component :width="props.width" :height="props.height2"></article-component>' +
        '</div>',
        data:function(){
            return {
                props:{
                    height:window.innerHeight*0.6,
                    height2:window.innerHeight*0.4,
                    width:this.getWidth(),
                    lineWidth:this.getLineWidth()
                },
                svgStyle:{
                    position:'absolute',
                    display:'inline-block',
                    width:this.getW()+'px',
                    height:this.getH()+'px',
                    opacity:0.1
                },
                gStyle:{
                    translate:'('+(this.getW()/2)+','+(this.getH()/2)+')'
                },
                rootStyle:{
                    width:window.innerWidth+'px',
                    height:window.innerHeight+'px',
                    backgroundColor:'#e1e1e1'
                },
            }
        },
        methods:{
            getSvgId:function () {
                return 'mySvg';
            },
            getW:function () {
                return window.innerWidth;
            },
            getH:function () {
                return window.innerHeight;
            },
            rainbowPack:function () {
                rainbow.run(('#'+this.getSvgId()),this.getW(),this.getH());
            },
            getLineWidth:function () {
                return 4;
            },
            getWidth:function () {
                return (window.innerWidth-this.getLineWidth())/2;
            }
        },
        mounted:function () {
            this.rainbowPack();
        },
        components:{
            'top-header':topHeader,
            'source-code-component':sourceCodeComponent,
            'article-component':articleComponent
        }
    };


    let root = {
        el:'#root',
        template:'<container></container>',
        components:{
            'container':container
        }
    };

    return {
        root:root
    }
})();

export default mobile;